<template>
  <div class="app-container">

    <el-row>
      <el-col :span="16">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['scxx:bzTeam:add']"
        >新增
        </el-button>
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['scxx:bzTeam:edit']"
        >修改
        </el-button>
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['scxx:bzTeam:remove']"
        >删除
        </el-button>
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['scxx:bzTeam:export']"
        >导出
        </el-button>
      </el-col>
      <el-col :span="8">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px"
                 style="display: flex;justify-content: center">
          <el-form-item prop="isStart">
            <el-select v-model="queryParams.isStart" placeholder="是否启用" clearable style="width: 100px">
              <el-option
                v-for="dict in dict.type.is_use"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item prop="bzName">
            <el-input
              v-model="queryParams.bzName"
              placeholder="关键字查询"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item class="yu" style="display: flex">
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>


<!--    <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>-->

    <el-table v-loading="loading" :data="bzTeamList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column label="班组编码" align="center" prop="bzCode"/>
      <el-table-column label="班组名称" align="center" prop="bzName"/>
      <el-table-column label="班组类型" align="center" prop="bzTypeCode">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.bz_team_type" :value="scope.row.bzTypeCode"/>
        </template>
      </el-table-column>
      <el-table-column label="班次类型" align="center" prop="bcCode">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.bc_type" :value="scope.row.bcCode"/>
        </template>
      </el-table-column>
      <el-table-column label="生产单元编码" align="center" prop="dyCode"/>
      <el-table-column label="状态" align="center" prop="isStart">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.is_use" :value="scope.row.isStart"/>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['scxx:bzTeam:edit']"
          >修改
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['scxx:bzTeam:remove']"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改生产班组对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body @open="openChange" @close="closeChange">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px" inline>
        <el-row>
          <el-col :span="12">
            <el-form-item label="班组名称" prop="bzName">
              <el-input v-model="form.bzName" placeholder="请输入班组名称"/>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="班组类型" prop="bzTypeCode">
              <el-select v-model="form.bzTypeCode" placeholder="请选择班组类型">
                <el-option
                  v-for="dict in dict.type.bz_team_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="班次类型" prop="bcCode">
              <el-select v-model="form.bcCode" placeholder="请选择班次类型">
                <el-option
                  v-for="dict in dict.type.bc_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否启用" prop="isStart">
              <el-select v-model="form.isStart" placeholder="请选择是否启用">
                <el-option
                  v-for="dict in dict.type.is_use"
                  :key="dict.value"
                  :label="dict.label"
                  :value="parseInt(dict.value)"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="生产单元" prop="dyCode">
          <el-input v-model="form.dyCode" placeholder="请输入" readonly
                    @click.native="dialogVisibleScdy = true;getScdy()" suffix-icon="el-icon-more"></el-input>
        </el-form-item>

        <el-button type="primary" @click="openPeopleChoose();" style="margin-left: 40px">选择成员</el-button>
      </el-form>
      <div>
        <span>
          成员列表:
        </span>
        <el-tag
          v-for="mess in userTime"
          :key="mess.userId"
          closable
          style="margin: 5px;user-select: none"
          @close="delTags(mess.userId)"
        >
          {{ mess.nickName }}
        </el-tag>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>

    <!--    选择班组成员-->
    <el-dialog
      title="选择成员"
      :visible.sync="dialogVisible"
      width="30%">
      <el-container>
        <el-header>
          <el-row>
            <el-col :span="14">
              <el-input suffix-icon="el-icon-search" @keyup.enter.native="getPeopleList"
                        v-model="getPeopleParams.nickName"></el-input>
            </el-col>
            <el-col :span="10">
              <el-button plain style="margin-left: 10px" @click="getPeopleList()" type="primary">搜索</el-button>
              <el-button plain style="margin-left: 5px" @click="getPeopleParams.nickName='';getPeopleList();" type="info">重置</el-button>
            </el-col>
          </el-row>

        </el-header>
        <el-main>

          <!-- 展示人员信息 -->
          <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="peopleTableSelect">
            <el-table-column
              type="selection">
            </el-table-column>
            <el-table-column
              prop="userName"
              label="用户名">
            </el-table-column>
            <el-table-column
              prop="nickName"
              label="姓名">
            </el-table-column>
            <el-table-column
              prop="dept.deptName"
              label="所属部门">
            </el-table-column>
          </el-table>
          <pagination
            v-show="peopleTotal>0"
            :total="peopleTotal"
            :page.sync="getPeopleParams.pageNum"
            :limit.sync="getPeopleParams.pageSize"
            @pagination="getPeopleList"
          />
        </el-main>
      </el-container>
      <span slot="footer" class="dialog-footer">
        <el-button @click="toggleSelection()">重置</el-button>
        <el-button @click="peopleClose">取 消</el-button>
        <el-button type="primary" @click="peopleSubmit">确 定</el-button>
      </span>
    </el-dialog>


    <!--    选择生产单元-->
    <el-dialog
      title="选择生产单元"
      :visible.sync="dialogVisibleScdy"
      width="50%"
      @close="scdyClose()">
      <el-container>
        <el-header>
          <el-row :gutter="10">
            <el-col :span="10">
              <el-input suffix-icon="el-icon-search" @keyup.enter.native="getScdy"
                        v-model="getScdyParams.dyName"></el-input>
            </el-col>
            <el-col :span="6" >
              <el-select v-model="getScdyParams.dyTypeCode" placeholder="类型选择" @change.native="getScdy">
                <el-option
                  v-for="dict in dict.type.production_unit_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="parseInt(dict.value)"
                ></el-option>
              </el-select>
            </el-col>
            <el-col :span="8">
              <el-button plain @click="getScdy()" type="primary">搜索</el-button>
              <el-button plain @click="getScdyParams.dyName='';getScdyParams.dyTypeCode='';
              getScdy();" type="info">重置</el-button>
            </el-col>
          </el-row>

        </el-header>
        <el-main>

          <!-- 展示生产单元 -->
          <el-table
            ref="multipleTableScdy"
            :data="scdyData"
            tooltip-effect="dark"
            style="width: 100%"
            @row-click="getScdyData">
            <el-table-column
              prop="dyCode"
              label="生产单元编码">
            </el-table-column>
            <el-table-column
              prop="dyName"
              label="生产单元名称">
            </el-table-column>
            <el-table-column prop="dyTypeCode" label="生产单元类型">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.production_unit_type" :value="scope.row.dyTypeCode"/>
              </template>
            </el-table-column>
            <el-table-column
              prop="fzrCode"
              label="负责人">
            </el-table-column>
          </el-table>
          <pagination
            v-show="scdyTotal>0"
            :total="scdyTotal"
            :page.sync="getScdyParams.pageNum"
            :limit.sync="getScdyParams.pageSize"
            @pagination="getScdy"
          />
        </el-main>
      </el-container>
    </el-dialog>
  </div>
</template>

<script>
import {listBzTeam, getBzTeam, delBzTeam, addBzTeam, updateBzTeam, getScdy} from "@/api/scxx/bzTeam";

import { listUser, getUser } from '@/api/system/user'
import {getJldw} from "@/api/scxx/wlMess";


export default {
  name: "BzTeam",
  dicts: ['is_use', 'bc_type', 'bz_team_type', 'production_unit_type'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 生产班组表格数据
      bzTeamList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        bzName: null,
        bzTypeCode: null,
        bcCode: null,
        dyCode: null,
        isStart: null,
        isDelete: null
      },
      // 表单参数
      form: {
        peoples: []
      },
      // 表单校验
      rules: {
        bzName: [
          {required: true, message: "班组名称不能为空", trigger: "blur"}
        ],
        bzTypeCode: [
          {required: true, message: "班组类型不能为空", trigger: "change"}
        ],
        bcCode: [
          {required: true, message: "班次编码不能为空", trigger: "change"}
        ],
        dyCode: [
          {required: true, message: "生产单元不能为空", trigger: "blur"}
        ],
        isStart: [
          {required: true, message: "是否启用不能为空", trigger: "change"}
        ],
        isDelete: [
          {required: true, message: "是否删除不能为空", trigger: "change"}
        ]
      },
      // 班组成员标签
      users: [],
      // 临时班组成员
      userTime: [],
      // 控制选择成员的弹出层
      dialogVisible: false,
      // 人员数据
      tableData: [],
      // 选中的数据
      multipleSelection: [],
      // 查询人员参数
      getPeopleParams: {
        pageNum: 1,
        pageSize: 10,
        // 弹出层搜索框值
        nickName:""
      },
      // 总条数
      peopleTotal: 0,
      // 生产单元
      dialogVisibleScdy: false,
      scdyData:[],
      getScdyParams: {
        pageNum: 1,
        pageSize: 10,
        gxName:"",
        dyTypeCode:''
      },
      scdyTotal:0
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getScdy(){
      getScdy(this.getScdyParams).then(response => {
        this.scdyData = response.rows;
        this.scdyTotal = response.total;
      });
    },
    getScdyData(row, column, event){
      this.form.dyCode = row.dyCode
      this.dialogVisibleScdy = false
    },


    // 点击选择成员时触发
    async openPeopleChoose(){
      this.dialogVisible=true;
      await this.getPeopleList()
      const selection = []
      this.userTime.forEach(e => {
        this.tableData.forEach(e1 => {
          if(e.userId == e1.userId) {
            selection.push(e1)
          }
        })
      })
      selection.forEach(e => {
        this.$refs.multipleTable.toggleRowSelection(e, true)
      })
    },
    // 新增修改对话框关闭时
    closeChange(){
      this.userTime = [];
      this.users = []
    },
    // 新增修改对话框打开时
    openChange(){
      this.userTime = [...this.users]
    },
    // 删除成员
    delTags(userid){
      this.userTime = this.userTime.filter((item) => {
        return item.userId != userid;
      });
    },
    // 提交成员数据
    peopleSubmit(){
      this.getPeopleParams.nickName = ""
      this.dialogVisible = false;
      this.userTime = [...this.multipleSelection]
      this.multipleSelection = []
    },
    // 关闭选择成员窗口
    peopleClose(){
      this.multipleSelection = []
      this.getPeopleParams.nickName = ""
      this.$refs.multipleTable.clearSelection()
      this.dialogVisible = false;
    },
    // 获取选中成员的数据
    peopleTableSelect(selection){
      this.multipleSelection = selection;
    },
    // 查询所有成员
    async getPeopleList(){
      const res = await listUser(this.getPeopleParams)
      this.tableData = res.rows;
      this.peopleTotal = res.total;
    },
    // 成员取消选中
    toggleSelection() {
      this.$refs.multipleTable.clearSelection();
    },
    /** 查询生产班组列表 */
    getList() {
      this.loading = true;
      listBzTeam(this.queryParams).then(response => {
        this.bzTeamList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.userTime = []
      this.users = []
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        bzCode: null,
        bzName: null,
        bzTypeCode: null,
        bcCode: null,
        dyCode: null,
        isStart: null,
        isDelete: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.bzCode)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加生产班组";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const bzCode = row.bzCode || this.ids
      getBzTeam(bzCode).then(response => {
        this.form = response.data;
        this.open = true;
        this.users = [...this.form.peoples]
        this.title = "修改生产班组";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.users = this.userTime
      this.form.peoples = this.users
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.bzCode != null) {
            updateBzTeam(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addBzTeam(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const bzCodes = row.bzCode || this.ids;
      this.$modal.confirm('是否确认删除生产班组编号为"' + bzCodes + '"的数据项？').then(function () {
        return delBzTeam(bzCodes);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      });
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('scxx/bzTeam/export', {
        ...this.queryParams
      }, `bzTeam_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>
<style scope lang="scss">
.yu {
  .el-form-item__content {
    display: flex;
  }
}
</style>
